<template>
  <div class="content">
    <el-scrollbar style="height: 700px" >
      <el-tabs v-model="activeName">
        <el-tab-pane label="原始答卷" name="text">
          <div v-for="(question, index) in questions">
            <div v-if="getType(question)===0">
              <radio :question="question" :index="index+1" :time="time"></radio>
            </div>
            <div v-if="getType(question)===1">
              <checkbox :question="question" :index="index+1" :time="time"></checkbox>
            </div>
            <div v-if="getType(question)===2">
              <score :question="question" :index="index+1" :time="time"></score>
            </div>
            <div v-if="getType(question)===3">
              <completion :question="question" :index="index+1" :time="time"></completion>
            </div>
            <el-divider></el-divider>
          </div>
        </el-tab-pane>

        <el-tab-pane label="还原作答" name="paper">
          <div v-for="(question, index) in questions">
            <div v-if="getType(question) === 0">
              <raw-radio  :question="question" :index="index+1" :time="time"></raw-radio>
            </div>
            <div v-if="getType(question) === 1">
              <raw-checkbox :question="question" :index="index+1" :time="time"></raw-checkbox>
            </div>
            <div v-if="getType(question) === 2">
              <raw-score :question="question" :index="index+1" :time="time"></raw-score>
            </div>
            <div v-if="getType(question) === 3">
              <raw-completion :question="question" :index="index+1" :time="time"></raw-completion>
            </div>
            <br>
          </div>
        </el-tab-pane>
      </el-tabs >
    </el-scrollbar>
  </div>
</template>

<script>
import Radio from "./components/Radio"
import Checkbox from "./components/Checkbox"
import Completion from "./components/Completion"
import Score from "./components/Score"
import RawRadio from "./components/RawRadio"
import RawCheckbox from "./components/RawCheckbox"
import RawCompletion from "./components/RawCompletion"
import RawScore from "./components/RawScore"
export default {
  name: "PaperView",
  components: {
    Radio, Checkbox, Completion, Score, RawRadio, RawCheckbox, RawCompletion, RawScore
  },
  props: {
    time: String,
    questions: Array
  },
  data() {
    return {
      activeName: 'text'
    }
  },
  methods: {
    getType(question) {
      if(question.type === 'radio') return 0
      else if(question.type === 'checkbox') return 1
      else if(question.type === 'score') return 2
      else if(question.type === 'completion') return 3
    },

  },
}
</script>

<style scoped>

.el-divider {
  border-top: 1px dashed #e8eaec;
}
</style>